{% extends 'backend.html' %}
{% block backend_main %}
    <div class="panel panel-primary">
        <div class="panel-heading">
            {% if condition == 'category' %}
                <h3 class="panel-title">管理分类</h3>
            {% elif condition == 'tag' %}
                <h3 class="panel-title">管理标签</h3>
            {% elif condition == 'advertisement' %}
                <h3 class="panel-title">管理广告</h3>
            {% endif %}
        </div>
        <div class="panel-body">
            <table class="table table-hover">
                {% if condition != 'advertisement' %}
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>名称</th>
                        <th>个人站点</th>
                        <th>文章数</th>
                        <th>操作</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for data in data_obj %}
                        <tr>
                            <th scope="row">{{ forloop.counter }}</th>
                            <td>
                                <a href="{% url 'blog:select_article' request.user.username condition data.pk %}">{{ data.name }}</a>
                            </td>
                            <td>{{ data.blog.name }}</td>
                            <td>{{ data.article_set.count }}</td>
                            <td>
                                <button class="btn btn-warning btn_edit" value="{{ data.pk }}"><a
                                        href="#" data-toggle="modal"
                                        data-target="#editCategoryModal">编辑</a>
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-danger">
                                    <a href="{% url 'backend:delete' condition data.pk %}">删除</a>
                                </button>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                {% else %}  <!-- 广告 -->
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>广告标题</th>
                        <th>广告正文</th>
                        <th>联系方式</th>
                        <th>广告图像</th>
                        <th>是否是轮播图</th>
                        <th>操作</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for data in data_obj %}
                        <tr>
                            <th scope="row">{{ forloop.counter }}</th>
                            <td>{{ data.title }}</td>
                            <td>{{ data.content|truncatechars:50 }}...</td>
                            <td>{{ data.phone }}</td>
                            <td><img src="/media/{{ data.img }}" alt="{{ data.title }}"
                                     style="height: 50px;width: 100px"></td>
                            <td>
                                {% if  data.is_background %}
                                    <div class="glyphicon glyphicon-ok"></div>
                                {% else %}
                                    <div class="glyphicon glyphicon-remove"></div>
                                {% endif %}
                            </td>
                            <td>
                                <button class="btn btn-warning btn_edit_adv" value="{{ data.pk }}">
                                    <a href="#" data-toggle="modal" data-target="#editAdvModal">编辑</a>
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-danger">
                                    <a href="{% url 'backend:delete' condition data.pk %}">删除</a>
                                </button>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                {% endif %}
            </table>
        </div>
    </div>
    <div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">edit {{ condition }}</h4>
                </div>
                <form class="layui-form">
                    {% csrf_token %}
                    <div class="layui-form-item">
                        <label for="oldName" class="layui-form-label">原名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="oldName" name="oldName" lay-verify="required"
                                   autocomplete="off" class="layui-input " disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="category" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="editBlog" class="layui-form-label">站点</label>
                        <div class="layui-input-block">
                            <input type="text" id="oldBlog" name="blog" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input " disabled>
                        </div>
                    </div>
                    <div class="layui-form-item text-center">
                        <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </form>
            </div>
        </div>
    </div><!-- 编辑标签和分类模态框 -->

    <div class="modal fade" id="editAdvModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">编辑广告</h4>
                </div>
                <form class="layui-form" id="editAdvForm">
                    {% csrf_token %}
                    <div class="layui-form-item">
                        <label for="oldTitle" class="layui-form-label">原名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="oldTitle" autocomplete="off" class="layui-input" disabled>
                            <input type="text" name="old_title" id="oldTitleInput"
                                   autocomplete="off" class="layui-input" style="display: none">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="newTitle" class="layui-form-label">名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="newTitle" name="title" lay-verify="required"
                                   placeholder="请输入广告标题"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label for="adv_content" class="layui-form-label">文本域</label>
                        <div class="layui-input-block">
                            <textarea id="adv_content" name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="newPhone" class="layui-form-label">联系方式</label>
                        <div class="layui-input-block">
                            <input type="text" id="newPhone" name="phone" lay-verify="required"
                                   placeholder="请输入联系方式"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="isBackground" class="layui-form-label">轮播图</label>
                        <div class="layui-input-block">
                            <input type="checkbox" id="isBackground" checked name="is_background" lay-skin="switch"
                                   lay-filter="switchTest" title="是|否">
                        </div>
                    </div>
                    <div class="form-group">  {# 原图像展示 #}
                        <label for="old_adv">原图像 :</label>
                        <img src="" alt="图像走丢了" id="old_adv"
                             style="height: 100px;width: 200px">
                    </div>
                    <div class="form-group">
                        <label for="new_img_adv">修改图像 : <span>
                            <img src="" alt="图像走丢了" id="img_new_adv"
                                 style="height: 100px;width: 200px">
                        </span></label>
                        <input type="file" id="new_img_adv" name="new_img_adv" style="display: none">
                    </div>
                    <div class="layui-form-item text-center">
                        <button class="layui-btn" lay-submit lay-filter="btn_edit_adv">确认</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </form>
            </div>
        </div>
    </div><!-- 编辑广告模态框 -->


    <script>
        $('.btn_edit').click(function () {
            let pk = $(this).attr('value');
            $.ajax({
                url: '{% url 'backend:editCategoryTag'%}',
                type: 'get',
                contentType: 'application/json',
                data: {
                    'condition': '{{condition}}',
                    'pk': pk,
                },
                success: function (res) {
                    $('#oldName').attr('value', res.name);
                    $('#oldBlog').attr('value', res.blog);
                }
            })
        });
        layui.use(['form'], function () {
            let form = layui.form;
            // 提交事件
            form.on('submit(demo2)', function (data) {
                let field = data.field; // 获取表单字段值
                field['condition'] = '{{ condition }}';
                $.ajax({
                    url: '{% url 'backend:editCategoryTag' %}',
                    type: 'post',
                    data: field,
                    success: function (res) {
                        if (res.code === 200) {
                            window.location.href = '{% url 'backend:manage' condition %}'
                        }
                    }
                })
                return false; // 阻止默认 form 跳转
            });
        });
    </script><!-- 编辑标签和分类的js动作 -->
    <script>
        $(document).ready(
            $('#new_img_adv').change(function () {
                    {#声明FileReader对象#}
                    let fileReader = new FileReader();
                    {#获取文件数据#}
                    let fileData = $(this)[0].files[0];
                    fileReader.readAsDataURL(fileData);
                    {#等待文件加载完再执行渲染，保重图片的数据完整渲染#}
                    fileReader.onload = function () {
                        $('#img_new_adv').attr('src', fileReader.result);
                    }
                }
            ),
            $('.btn_edit_adv').click(function () {

                let pk = $(this).attr('value');
                $.ajax({
                    url: '{% url 'backend:editAdvertisement'%}',
                    type: 'get',
                    contentType: 'application/json',
                    data: {
                        'pk': pk,
                    },
                    success: function (res) {
                        $('#oldTitle').attr('value', res.title);
                        $('#newTitle').attr('value', res.title);
                        $('#oldTitleInput').attr('value', res.title);
                        $('#adv_content').text(res.content);
                        $('#newPhone').attr('value', res.phone);
                        $('#old_adv').attr('src', '/media/' + res.img);
                        $('#img_new_adv').attr('src', '/media/' + res.img);
                        if (!res.is_background) {
                            $('#isBackground').next().removeClass('layui-form-onswitch').click();
                        }else{
                            $('#isBackground').next().addClass('layui-form-onswitch')
                        }
                    }
                })
            })
        )
        layui.use(['form'], function () {
            let form = layui.form;
            // 提交事件
            form.on('submit(btn_edit_adv)', function () {
                let formData = new FormData;
                $.each($('#editAdvForm').serializeArray(), function (index, data_dict) {
                    console.log(data_dict)
                    formData.append(data_dict.name, data_dict.value)
                })
                formData.append('new_adv_img', $('#new_img_adv')[0].files[0])
                $.ajax({
                    url: '{% url 'backend:editAdvertisement' %}',
                    type: 'post',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.code===200){
                            window.location.href='{% url 'backend:manage' 'advertisement' %}'
                        }
                    }
                })
                return false; // 阻止默认 form 跳转
            });
        });
    </script><!-- 编辑广告的js动作 -->
{% endblock %}